<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <div>
          <label>读过的小学</label>
          <ph-checkbox-group :value="sx" @change="onSxChange">
            <ph-checkbox-item
              v-for="item in sxs"
              :value="item.value"
              :key="item.value"
              >{{ item.text }}</ph-checkbox-item
            >
          </ph-checkbox-group>
        </div>
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <div>
          <label>读过的小学(禁止全部选项)</label>
          <ph-checkbox-group :value="sx" @change="onSxChange" :disabled="true">
            <ph-checkbox-item
              v-for="item in sxs"
              :value="item.value"
              :key="item.value"
              >{{ item.text }}</ph-checkbox-item
            >
          </ph-checkbox-group>
        </div>
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <div>
          <label>度过的小学（禁止某一个）</label>
          <ph-checkbox-group :value="sx" @change="onSxChange">
            <ph-checkbox-item
              :disabled="item.value == 2"
              v-for="item in sxs"
              :value="item.value"
              :key="item.value"
              >{{ item.text }}</ph-checkbox-item
            >
          </ph-checkbox-group>
        </div>
        <ph-pretty>{{ demo3 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {
  PhView,
  PhCheckboxGroup,
  PhCheckboxItem,
  PhTab,
  PhTabPanel,
} from "@/index";
import * as Data from "../data/checkbox";
export default defineComponent({
  components: {
    PhView,
    PhCheckboxGroup,
    PhCheckboxItem,
    PhTab,
    PhTabPanel,
  },
  setup() {
    const formdata = reactive({
      sx: 2,
      sxs: [
        {
          value: 1,
          text: "康家沟小学",
        },
        {
          value: 2,
          text: "张家界小学",
        },
        {
          value: 3,
          text: "贵族小学",
        },
      ],
    });
    const onSxChange = (v: number) => {
      console.log(v);
      formdata.sx = v;
    };
    return {
      ...toRefs(formdata),
      onSxChange,
      ...Data,
    };
  },
});
</script>
<style lang="scss">
.form {
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
